<!DOCTYPE html>
<html>

<head>
	<title>Parallax Slider with jQuery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Parallax Slider with jQuery" />
	<meta name="keywords" content="parallax, jquery, slider, slideshow, rotation, perspective" />
	<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="js/cufon-yui.js" type="text/javascript"></script>
	<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
	<script type="text/javascript">
		Cufon.replace('h1', { textShadow: '1px 1px #000' });
		Cufon.replace('h2', { textShadow: '1px 1px #000' });
		Cufon.replace('.footer', { textShadow: '1px 1px #000' });
		Cufon.replace('.pxs_loading', { textShadow: '1px 1px #000' });
	</script>
</head>

<body>
	<div class="wrapper">
		<h1>Parallax Slider </h1>
	</div>

	<div id="pxs_container" class="pxs_container">
		<div class="pxs_bg">
			<div class="pxs_bg1"></div>
			<div class="pxs_bg2"></div>
			<div class="pxs_bg3"></div>
		</div>
		<div class="pxs_loading">Loading images...</div>
		<div class="pxs_slider_wrapper">
			<ul class="pxs_slider">
				<li><img src="images/1.jpg" alt="First Image" /></li>
				<li><img src="images/2.jpg" alt="Second Image" /></li>
				<li><img src="images/3.jpg" alt="Third Image" /></li>
				<li><img src="images/4.jpg" alt="Forth Image" /></li>
				<li><img src="images/5.jpg" alt="Fifth Image" /></li>
				<li><img src="images/6.jpg" alt="Sixth Image" /></li>
			</ul>
			<div class="pxs_navigation">
				<span class="pxs_next"></span>
				<span class="pxs_prev"></span>
			</div>
			<ul class="pxs_thumbnails">
				<li><img src="images/thumbs/1.jpg" alt="First Image" /></li>
				<li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
				<li><img src="images/thumbs/3.jpg" alt="Third Image" /></li>
				<li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
				<li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
				<li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
			</ul>
		</div>
	</div>
	<div class="footer-banner" style="width:728px; margin:30px auto"></div>
	<!-- The JavaScript -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.parallax-slider.js"></script>
	<script type="text/javascript">
		$(function () {
			var $pxs_container = $('#pxs_container');
			$pxs_container.parallaxSlider();
		});
	</script>
</body>

</html>